<template>
	<view class="container-sign">
		<scroll-view scroll-y="true" style="height: 90vh;">
			<view class="contract">
				<image :src="src" mode="" v-if="!isDraw" crossorigin="Anonymous"></image>
				<canvas ref="canvas" canvas-id="canvasId" style="height: 5000rpx;width: 100%;" v-else></canvas>
			</view>

		</scroll-view>
		<view class="jp-signature flex-between">
			<view class="" style="flex: 1;">
				<jp-signature-popup @input="save" :required="true"></jp-signature-popup>
			</view>
			<view class="" style="flex: 1; margin-right: 20rpx;">
				<u-button type="primary" :hairline="true" text="提交" @click="saveImgToLocal" size="large"></u-button>
			</view>
		</view>
		<!-- <view> -->
		<!-- </view> -->


	</view>
</template>

<script>
	export default {
		data() {
			return {
				isDraw: '',
				show: false,
				src: '',
				canvasCtx: null,
				image: '',
				id:null
			}
		},
		onLoad(options) {
			this.src = this.$fun.imgUrl(options.src)
			this.id = options.id
			this.canvasHeight = uni.getSystemInfoSync().windowHeight
			this.canvasWidth = uni.getSystemInfoSync().windowWidth
			// this.drawImage()
		},
		methods: {
			save(item) {
				var that = this;
				this.isDraw = item
				this.saveClick()
			},
			drawImage() {
				const that = this
				uni.getImageInfo({
					src: that.src,
					success(data) {
						that.canvasCtx = uni.createCanvasContext(`canvasId`)
						that.canvasCtx.drawImage(data.path, 0, 0, that.canvasWidth, 3000)
						that.canvasCtx.save(); //保存
						that.canvasCtx.draw() //绘制
						uni.canvasToTempFilePath({
							canvasId: 'canvasId',
							success: (res) => {
								// res.tempFilePath是生成的图片路径，可以用于保存或分享
								console.log(11, res.tempFilePath);
								// 可以将图片路径保存到数据状态中，或进行其他操作
							},
							fail: (err) => {
								console.error(err);
							}
						});
					}
				})
			},
			saveImgToLocal() {
				let that = this
				if (!that.isDraw) {
					return that.$fun.msg('请先签名')
				}
				uni.uploadFile({
					url: that.$baseUrl + '/api/common/upload', // 仅为示例，非真实的接口地址 
					filePath: that.isDraw,
					name: 'file',
					header: {
						token: uni.getStorageSync('token'),
						contentType: "application/json"
					},
					success(res) {
						var res = JSON.parse(res.data)
						that.image = res.data.fullurl
						that.$fun.jump(`/pageB/createOrder?id=${that.id}&img=${that.image}`)
						// that.$fun.jump(`/pageB/createOrder?id=${that.id}&img=${that.isDraw}`)
				
					},
				})
				// uni.canvasToTempFilePath({
				// 	fileType: "png",
				// 	quality: 1,
				// 	canvasId: `canvasId`,
				// 	success: function(res1) {
				// 		console.log(1111, res1.tempFilePath);
				// 		uni.uploadFile({
				// 			url: that.$baseUrl + '/api/common/upload', // 仅为示例，非真实的接口地址 
				// 			filePath: res1.tempFilePath,
				// 			name: 'file',
				// 			header: {
				// 				token: uni.getStorageSync('token'),
				// 				contentType: "application/json"
				// 			},
				// 			success(res) {
				// 				var res = JSON.parse(res.data)
				// 				that.image = res.data.fullurl
				// 				that.$fun.jump(`/pageB/createOrder?id=${that.id}&img=${that.image}`)
				// 				// that.$fun.jump(`/pageB/createOrder?id=${that.id}&img=${that.isDraw}`)

				// 			},
				// 		})
				// 	},
				// 	fail(err) {
				// 		console.log(11, err);
				// 	}
				// }, that)
			},
			//保存图片
			saveClick() {
				const that = this
				that.canvasCtx = uni.createCanvasContext(`canvasId`)
				// if (!that.isDraw) {
				// 	return that.$fun.msg('请先签名')
				// }
				uni.getImageInfo({
					src: that.src,
					success(data) {
						console.log(that.canvasWidth, that.canvasHeight);
						that.canvasCtx.drawImage(data.path, 0, 0, that.canvasWidth, 2500)
						that.canvasCtx.drawImage(that.isDraw, that.canvasWidth / 1.5, 2100, 50, 50)
						that.canvasCtx.save(); //保存
						that.canvasCtx.draw() //绘制
					}
				})
			},
			clear() {
				this.$refs.signatureRef.clear()
			},
			undo() {
				this.$refs.signatureRef.undo()
			},
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				// console.log('close');
			}
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
	}

	.container-sign {
		.contract {
			width: 100%;
			height: 100%;

			image {
				width: 100%;
				height: 5000rpx;
			}
		}

		.jp-signature {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			background-color: #fff;
			align-items: center;
		}
	}
</style>